<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
	<style>
		.fa-facebook:before {
			content: "\f09a";
		}

		ul {
			list-style: none;
			float: left;
		}

		ul li {
			position: relative;
			width: 100px;
			height: 100px;
			float: left;
			background: #474644;
			border-radius: 15px;
			border-bottom: 5px solid #33322f;
			border-left: 3px solid #000000;
			box-shadow: -3px 5px 10px 3px rgba(51, 50, 47, 0.5), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, 0px 2px 1px rgba(0, 0, 0, .7);
			-webkit-transition: -webkit-box-shadow .15s ease-in-out;
		}

		ul li:hover i {
			-webkit-transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
			transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
		}

		ul li:active {
			border-bottom: 1px solid #33322f;
			top: 5px;
			border-left: 1px solid #000000;
			margin-right: 2px;
			box-shadow: -2px 4px 7px 1px rgba(51, 50, 47, 0.7), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, -1px 2px 1px rgba(0, 0, 0, .7);
			z-index: -1;
		}

		.facebook:hover i {
			text-shadow:
				0px 0px #394C89, 0px 1px #32447A, -1px 2px #2C3B6A, -2px 3px #26335B, 0px 6px 5px rgba(51, 50, 47, 0.8),
				0 0 1em #3f5598;
			color: #3f5598;
		}
	</style>
	<body>

		<div>
			<div>
				<ul>
					<li class="facebook"><a href="#"><i class="fa-facebook"></i></a></li>
					<li><a href="#"><i></i></a></li>
					<li><a href="#"><i></i></a></li>
					<li><a href="#"><i></i></a></li>
					<li><a href="#"><i></i></a></li>
				</ul>
			</div>
		</div>

	</body>
</html>
